<template>
  <div class="content">
    <div class="row">
      <div class="column">
        <div class="column1-transfer">
          <h3>特征值选择</h3>
          <el-transfer
            v-model="value"
            filterable
            :titles="['特征值列表', '选定特征值']"
            :filter-method="filterMethod"
            filter-placeholder="特征值eigenvalue"
            :data="data"
          />
        </div>
        <div class="column1-select">
          <el-select v-model="value" placeholder="选择预测值">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </div>
      </div>
      <div class="column">
        <AIChart1/>
      </div>
    </div>
    <div class="row">
      <div class="column">
          <AIChart2/>
      </div>
      <div class="column">
          <AIChart3/>
      </div>
    </div>
  </div>
</template>

<script>
import AIChart1 from '../components/AIChart1.vue';
import AIChart2 from '../components/AIChart2.vue';
import AIChart3 from '../components/AIChart3.vue';
export default {
  data() {
    return {
      data: ['特征值1']
    };
  },
  methods: {},
  mounted() {},
  components: {
    'AIChart1': AIChart1,
    'AIChart2': AIChart2,
    'AIChart3': AIChart3,
  },
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  flex-direction: row;
  height: calc(50vh - 48px);
  width: 100vw;
}

.column {
  height: calc(50vh - 48px);
  width: 50vw;
}

.column1-transfer {
  margin-left: 20px;
  margin-top: 20px;
}

.column1-select {
  margin-left: 20px;
  margin-top: 20px;
}
</style>